<template>
    <div  class="calculateP" >
                 <view style="
font-size: 0.72rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
text-align: center;
padding: 0.3rem;
">
            -门店计费方式-
         </view>


         <div class="inputS">

                      <u-form :model="form" ref="uForm">
       <u-form-item
          style="padding: 0.7rem 1rem"
          prop="intro"
          label-width="auto"
          label="计费模式:"
          >
            <div  class="modal"  >
                <div class="modal-item">
                    <img src="../../style/image/cargo/round.png" alt="">
                    <div>30分钟计费制度</div>
                </div>

                <div class="modal-item"  >
                   <img src="../../style/image/cargo/selectRound.png" alt="">
                <div>60分钟计费制度</div>
                </div>
            </div>
          </u-form-item>
       
       <u-form-item
          style="padding: 0.7rem 1rem"
          prop="intro"
          label-width="auto"
          label="计费单价(元):"
          ><u-input    placeholder='请填写计费单价，单位元' v-model="form.intro"
        /></u-form-item>
        <u-form-item
          style="padding: 0.7rem 1rem"
          prop="intro"
          label-width="auto"
          label="封顶值(元):"
          ><u-input    placeholder='封顶值大于单价，小于99元' v-model="form.intro"
        /></u-form-item>

      </u-form>
         
         </div>


  <div class="footP" >
            <div  @click="addPosM" style="padding: 0.7rem;
display: flex;align-items: center;" >
                <!-- <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
                <div  style="color: white;
margin-left: 0.2rem;">提交</div>
            </div>

    </div>
  

    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class  extends Vue {
        

    public form = {
    name: "",
    intro: "",
    sex: "",
      };
    }


</script>

<style scoped>


.calculateP{
    background-color: #f4f5f7;
}

.inputS{
 background-color: white;
}

.modal{

}
.modal-item{
display: flex;
align-items: center;

}
.modal-item :nth-child(2){
font-size: 0.7rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}
.modal-item :nth-child(1){
 width: 1rem;
 height: 1rem;
 padding: 0.2rem;
}
.footP{

position: absolute;
bottom: 0;
background-color: #02af74;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>